<template>
  <div id="certify">
    <div class="swiper-container" v-if="videos.length > 0">
      <div class="swiper-wrapper">
        <div v-for="(video, i) in videos" :key="i" class="swiper-slide">
          <video
            :ref="refVideoKey + (i + 1)"
            :poster="video.icon"
            :src="video.video"
            controls
          />
        </div>
      </div>
    </div>
    <div class="swiper-pagination"></div>
    <div
      class="swiper-button-prev"
      @click="prevClick"
      v-show="videos && videos.length > 0"
    ></div>
    <div
      class="swiper-button-next"
      @click="nextClick"
      v-show="videos && videos.length > 0"
    ></div>
  </div>
</template>

<script>
import "./css/certify.css";
import "./css/swiper.min.css";
export default {
  name: "VideoSwiper",
  data() {
    return {
      refVideoKey: "video_",
    };
  },
  props: {
    //视频资源
    videos: {
      type: Array,
      default: () => new Array(),
    },
    //是否显示controls
    showControls: {
      type: Boolean,
      default: true,
    },
  },
  mounted: function () {
    // this.init();
  },
  methods: {
    // 轮播初始化
    init() {
      let modify, translate, scale, zIndex;

      var certifySwiper = new Swiper("#certify .swiper-container", {
        watchSlidesProgress: true,
        slidesPerView: "auto",
        centeredSlides: true,
        loop: true,
        autoplay: false, //是否自动轮播
        loopedSlides: 3,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: false, //下面焦点是否可点击
        },
        on: {
          click: function (e) {
            // alert("你点了Swiper;");
            if (
              !(
                e.target.parentElement &&
                e.target.parentElement.hasAttribute("swiper-slide-active")
              )
            ) {
              e.preventDefault();
              return false;
            }
          },
          progress: function (progress) {
            for (let i = 0; i < this.slides.length; i++) {
              var slide = this.slides.eq(i);
              var slideProgress = this.slides[i].progress;
              modify = 1;
              if (Math.abs(slideProgress) > 1) {
                modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
              }
              translate = slideProgress * modify * 260 + "px";
              scale = 1 - Math.abs(slideProgress) / 5;
              zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
              slide.transform(
                "translateX(" + translate + ") scale(" + scale + ")"
              );
              slide.css("zIndex", zIndex);
              slide.css("opacity", 1);
              if (Math.abs(slideProgress) > 3) {
                slide.css("opacity", 0);
              }
            }
          },
          setTransition: function (transition) {
            for (var i = 0; i < this.slides.length; i++) {
              var slide = this.slides.eq(i);
              slide.transition(transition);
            }
          },
        },
      });
    },
    //图片移动
    imgMove() {
      var Item = document.getElementsByClassName("item");
      this.imgTimer = setInterval(() => {
        this.numList.push(this.numList[0]);
        this.numList.shift();
        this.imgIndex++;
        for (var i = 0; i < Item.length; i++) {
          Item[i].className = "item " + this.numList[i];
        }
        for (var i in this.pressList) {
          this.pressList[i].isShow = false;
        }
        if (this.imgIndex > 4) {
          this.imgIndex = 0;
          this.pressList[this.imgIndex].isShow = true;
        } else {
          this.pressList[this.imgIndex].isShow = true;
        }
      }, 15000);
    },
    //
    btnOpen() {
      this.btnShow = true;
      clearInterval(this.imgTimer);
    },
    btnHide() {
      this.btnShow = false;
      this.imgMove();
    },
    leftClick() {
      var Item = document.getElementsByClassName("item");
      this.numList.unshift(this.numList[4]);
      this.numList.pop();
      for (var i = 0; i < Item.length; i++) {
        Item[i].className = "item " + this.numList[i];
      }
      for (var i in this.pressList) {
        this.pressList[i].isShow = false;
      }
      this.imgIndex--;
      if (this.imgIndex < 0) {
        this.imgIndex = 4;
        this.pressList[this.imgIndex].isShow = true;
      } else {
        this.pressList[this.imgIndex].isShow = true;
      }
    },
    rightClick() {
      var Item = document.getElementsByClassName("item");
      this.numList.push(this.numList[0]);
      this.numList.shift();
      for (var i = 0; i < Item.length; i++) {
        Item[i].className = "item " + this.numList[i];
      }
      for (var i in this.pressList) {
        this.pressList[i].isShow = false;
      }
      this.imgIndex++;
      if (this.imgIndex > 4) {
        this.imgIndex = 0;
        this.pressList[this.imgIndex].isShow = true;
      } else {
        this.pressList[this.imgIndex].isShow = true;
      }
    },
    //停止播放
    stopPlayVideo() {
      let activeEles = document.querySelectorAll(
        "#certify .swiper-slide video"
      );
      if (activeEles) {
        for (let i = 0; i < activeEles.length; i++) {
          const video = activeEles[i];
          if (video.paused) {
            // video.play();
          } else {
            video.pause();
          }
        }
      }
      // for (const refKey in this.$refs) {
      //   if (refKey.startsWith(this.refVideoKey)) {
      //     let videos = this.$refs[refKey];
      //     if (Array.isArray(videos) && videos.length > 0) {
      //       let video = videos[0];
      //       if (video.paused) {
      //         // video.play();
      //       } else {
      //         video.pause();
      //       }
      //     }
      //   }
      // }
    },
    prevClick() {
      console.log("prevClick");
      this.stopPlayVideo();
    },
    nextClick() {
      console.log("nextClick");
      this.stopPlayVideo();
    },
  },
};
</script>
import '@assets/css/swiper-index.css'
<style>
</style>